Building Shiny App exercises

Introduction To Shiny
Shiny is a package from RStudio that can be used to build interactive web pages with RStudio which is is an open source set of integrated tools designed to help you be more productive with R and you can download it from here. Use the examples in this tutorial to “take a first bite” and prepare for the exercises that follow and will help you build your first Shiny Application from “zero point”. This is the first part of the series and we will just create the interface, make some HTML formatting and add an image to our application. Specifically we will start creating a Shiny Application that will analyze the famous (Fisher’s or Anderson’s) iris data set which gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica. Lets go!
Building Interface (UI)
Every Shiny application includes two parts: a web page which shows the app to the user (UI), and a computer that activates the app (server). You need to create these two parts. UI is just a web document that the user gets to see and is responsible for creating the layout of the app and telling Shiny exactly where things go. The server is responsible for the logic of the app.
You can create a Shiny app by making a new directory and saving a ui.R and server.R file inside it. Each app will need its own unique directory.
You can run a Shiny app by giving the name of its directory to the function runApp(). For example if your Shiny app is in a directory called “Shiny App”, run it with the following code:



library(shiny)

runApp("Shiny App")

Or by just clicking the “Run App” button at the top of the editor which is the safest solution.

Answers to the exercises are available here.

If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.

Exercise 1

Create a new directory named “Shiny App” in your working directory.

Exercise 2

Create the ui.r and server.r files.

Secondly, we have to install the “Shiny” package with:
install.packages("shiny")
and then we will call it with:
library(shiny)
Now that we analyzed the structure of a Shiny app, we will show you how to build a user-interface for this.
To get started, we open the server.R and ui.R files and edit them like this:
#ui.R
shinyUI(fluidPage())
#server.R
shinyServer(function(input, output) {})
The result is an empty app with a blank user-interface, just to begin with.

Exercise 3

Create an empty app with a blank user-interface.

Layout
Shiny ui.R scripts use the function fluidPage() to create a display that automatically adjusts to the dimensions of your user’s browser window. You lay out your app by placing elements in the fluidPage() function.
For example, the ui.R script below creates a user-interface that has a title panel and then a sidebar layout, which includes a sidebar panel and a main panel. Note that these elements are placed within the fluidPage() function.
#ui.R
shinyUI(fluidPage( titlePanel("title panel"), sidebarLayout( sidebarPanel( "sidebar panel"), mainPanel("main panel"))))
The TitlePanel() and sidebarLayout() are the two most used elements to add to fluidPage(). They create a basic Shiny app with a sidebar.
The sidebarLayout() always takes two arguments: sidebarPanel function output and mainPanel function output.

Exercise 4

Create titlePanel(), name it “Shiny App” and sidebarLayout(). Do not forget to add sidebarPanel() and mainPanel() inside this.

HTML Content
You can add content to your Shiny app by placing it inside a *Panel function.
Headers
To create a header element: select a header function e.g. (h1) and give it the text you want to see in the header.
For example, you can create a first level header that says “Title” with h1("Title").
To place the element in your app:
Put h1("Title") as an argument to titlePanel(), sidebarPanel(), or mainPanel().
The text will appear in the corresponding panel of your web page. You can place multiple elements in the same panel if you separate them with a comma.
#ui.R
shinyUI(fluidPage( titlePanel("My Shiny App"), sidebarLayout( sidebarPanel(), mainPanel( h1("First level title"), h2("Second level title")))))

Exercise 5

Create an HTML element to add the title “Menu” in the sidebarPanel() and “Main” in mainPanel() with one of Shiny’s tag functions. HINT: Use h1,h2.

FORMATTED TEXT
Shiny offers many tag functions for formatting text.Take a look:
p: A paragraph of text
h1: A first level header
h2: A second level header
a: A hyper link
br: A line break (e.g. a blank line)
div: A division of text with a uniform style
span: An in-line division of text with a uniform style
pre: Text ‘as is’ in a fixed width font
code: A formatted block of code
img: An image
strong: Bold text
em: Italicized text

Exercise 6

Add a paragraph in your mainPanel() with a description about the app you are going to make.”This famous (Fisher’s or Anderson’s) iris data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica.” Use an HTML tag format. HINT:Use p.

Exercise 7

Link the word “iris” in the mainPanel() with this hyperlink “http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html”. HINT: Use a.

Exercise 8

Add the title “Analysis” under the desciption paragraph of your mainPanel. Do not forget the comma separation. HINT: Use br and h2.

Exercise 9

Use bold text to the words “Iris setosa”,”versicolor” and “virginica”. HINT: Use strong.

IMAGES
Images can improve the appearance of your app and help users understand the content. Shiny uses img() function to put image files in your app. To insert an image, give the img() function the name of your image file as the src argument (e.g., img(src = "my_image.png")). You can also include other HTML parameters such as height and width. For example:
img(src = "my_image.png", height = 68, width = 68).
The img() function looks for your image file in a specific place. Your file must be in a folder named “www” in the same directory as the ui.R script. Shiny will share any file placed here with your user’s web browser, which makes “www” a great place to put images, style sheets, and other things the browser will need to build the web components of your Shiny app. So if you want to use an image named “something.png”, your Shiny App directory should look like this one:
#ui.R
shinyUI(fluidPage( titlePanel("My Shiny App"), sidebarLayout( sidebarPanel(), mainPanel( img(src="something.png", height = 350, width = 350)))))

Exercise 10

Download this image and place it in a folder labeled “www” within your “Shiny App” directory. Name it “petal”, add .jpg extension and then call the img function inside the sidebarPanel(). Use height and width to decide its dimensions.

ADD CONTROL WIDGETS
In the second part of our series you will see how to add control widgets in your Shiny app. Widget is a web element that your users can interact with. The widgets provided by Shiny are:

FUNCTIONS
actionButton: Action Button
checkboxGroupInput: A group of check boxes
checkboxInput: A single check box
dateInput: A calendar for date selection
dateRangeInput: A pair of calendars for selecting a date range
fileInput: A file upload control wizard
helpText: Help text that can be added to an input form
numericInput: A field to enter numbers
radioButtons: A set of radio buttons
selectInput: A box with choices to select from
sliderInput: A slider bar
submitButton: A submit button
textInput: A field to enter text

ADDING WIDGETS
You can add widgets to your web page in the same way that you added other types of HTML content in part 1.
To add a widget to your app, place a widget function in sidebarPanel or in mainPanel in your ui.R file.
The first two arguments for each widget are a name for the widget which will be a character string that the user will not see, but you can use it to change the widget’s value and a label which will appear with the widget in your app and it should be a character string too.
The rest of the arguments vary from widget to widget, depending on what the widget needs to be functional. They may be initial values, ranges, and increments.
Follow the examples below to understand the logic behind the widgets’ functions and then enhance the app you created in part 1 by practising with the exercise set we prepared for you.
Firstly, we will add all the kinds of the widgets to our app, for educational reasons and later we will decide which of them is practical to keep.
Note that we will just add the buttons in this part. Reactivity will be added to them in a few chapters. Lets begin!

Answers to the exercises are available here.

If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.

Exercise 1

Open the app you created in part 1 and move the image from sidebarPanel to mainPanel, leave two rows under the title “Main”, put the image there and change its dimensions to: height = 150 and width = 200. HINT: Use br.

BUTTONS
In the example below we create a UI with a submitButton and an actionButton. Please note that we use the function fluidrow to make sure that all the elements we are going to use will be in the same line as we are going to need this in the next parts:
# ui.R
shinyUI(fluidPage(
titlePanel(“Widgets”),

fluidRow(h3(“Buttons”),
actionButton(“action”, label = “Action”),
br(),
br(),
submitButton(“Submit”))))

# server.R
shinyServer(function(input, output) {
})

Exercise 2

Leave a row and place an actionButton under the title “Menu” in sidebarPanel, give it the title “Actionbutton”, name = “per” and label = “Perform”. HINT: Use br and h4.

Exercise 3

Leave a row from the actionButton you just placed and add a submitButton with title = “Submitbutton” and name = “Submit”. HINT: Use br and h4.

SINGLE CHECKBOX
In the example below we create a UI with a single Checkbox:
# ui.R
shinyUI(fluidPage(
titlePanel(“Widgets”),

fluidRow(h3(“Single checkbox”),
checkboxInput(“checkbox”, label = “Choice A”, value = TRUE))))